<template>
  <el-dialog
    :title="id ? '编辑项目' : '新增项目'"
    :visible.sync="addDialogShow"
    :destroy-on-close="true"
    :append-to-body="true"
    width="65%"
    @close="handleClose"
    class="edit-main"
  >
    <el-form
      ref="formData"
      :model="formData"
      :rules="rules"
      label-width="120px"
    >
      <el-form-item label="项目名称" prop="projectName">
        <el-input
          type="input"
          placeholder="请输入内容"
          v-model="formData.projectName"
          style="width: 80%"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="业务类型" prop="businessType">
        <el-select
          v-model="formData.businessType"
          filterable
          placeholder="请选择"
          style="width: 80%"
          clearable
        >
          <el-option
            v-for="item in typeList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="外呼类型" prop="outboundType">
        <el-select
          v-model="formData.outboundType"
          filterable
          style="width: 80%"
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in outboundCallList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="参数" prop="param">
        <el-input
          type="input"
          placeholder="请输入内容"
          style="width: 80%"
          v-model="formData.param"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="外呼线路" prop="outboundLine">
        <el-select
          v-model="formData.outboundLine"
          style="width: 80%"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in outboundCallLineList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="坐席" prop="seats">
        <el-select
          v-model="formData.seats"
          style="width: 80%"
          filterable
          placeholder="请选择"
          clearable
        >
          <el-option
            v-for="item in seatList"
            :key="item.dictValue"
            :label="item.dictLabel"
            :value="item.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="排队超时（秒）" prop="lineTimeOut">
        <el-input
          type="input"
          placeholder="请输入内容"
          style="width: 80%"
          v-model="formData.lineTimeOut"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
      <el-form-item label="呼叫超时（秒）" prop="callTimeOut">
        <el-input
          type="input"
          placeholder="请输入内容"
          style="width: 80%"
          v-model="formData.callTimeOut"
          maxlength="200"
          show-word-limit
        >
        </el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="onSubmit">提 交</el-button>
      <el-button @click="handleClose">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { listData } from "@/api/system/dict/data";
import { Message } from "element-ui";
import {
  addProject,
  updateProject,
  getProjectDetail,
} from "@/api/projectManagement/list.js";

export default {
  name: "addProjectDialog",
  props: {
    addProjectDialogShow: {
      type: Boolean,
      default: false,
    },
    id: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      formData: {
        projectName: "", //项目名称
        businessType: "", //业务类型
        outboundType: "", //外呼类型
        param: "", //参数
        outboundLine: "", //外呼线路
        seats: "", //坐席
        lineTimeOut: 0, //排队超时
        callTimeOut: 0, //呼叫超时
      },
      rules: {
        projectName: [
          { required: true, message: "请输入项目名称", trigger: "blur" },
        ],
        businessType: [
          { required: true, message: "请选择业务类型", trigger: "change" },
        ],
        outboundType: [
          { required: true, message: "请选择外呼类型", trigger: "change" },
        ],
        param: [{ required: true, message: "请输入参数", trigger: "blur" }],
        // outboundLine: [
        //   { required: true, message: "请选择外呼线路", trigger: "change" },
        // ],
        // seats: [{ required: true, message: "请选择坐席", trigger: "change" }],
        lineTimeOut: [
          { required: true, message: "请输入排队超时", trigger: "blur" },
        ],
        callTimeOut: [
          { required: true, message: "请输入呼叫超时", trigger: "blur" },
        ],
      },
      typeList: [],
      outboundCallList: [],
      outboundCallLineList: [],
      seatList: [
        { dictValue: "1", dictLabel: "预测外呼" },
        { dictValue: "2", dictLabel: "比例外呼" },
        { dictValue: "3", dictLabel: "点击外呼" },
      ],

      addDialogShow: false,
    };
  },

  watch: {
    addProjectDialogShow: {
      handler(val) {
        if (val) {
          this.addDialogShow = val;
        }
      },
      immediate: true,
    },
    id: {
      handler(val) {
        if (val) {
          this.getProjectDetail();
        }
      },
    },
  },

  created() {
    this.getLineList();
    this.getBusinessType();
    this.getOutboundCallType();
  },

  methods: {
    // 获取项目详情
    async getProjectDetail() {
      const { code, data } = await getProjectDetail(this.id);
      if (code === 200) {
        this.getFormData(data);
      }
    },

    // 业务类型
    async getBusinessType() {
      const { rows } = await listData({
        pageNum: 1,
        pageSize: 100,
        dictType: "sssc_business_type",
      });
      this.typeList = rows || [];
    },

    // 线路
    async getLineList() {
      const { rows } = await listData({
        pageNum: 1,
        pageSize: 100,
        dictType: "sssc_gateway_type",
      });
      this.outboundCallLineList = rows || [];
    },

    // 外呼类型列表
    async getOutboundCallType() {
      const { rows } = await listData({
        pageNum: 1,
        pageSize: 100,
        dictType: "sssc_call_type",
      });
      this.outboundCallList = rows || [];
    },

    // 保存
    onSubmit() {
      this.$refs["formData"].validate(async (valid) => {
        if (valid) {
          const { lineTimeOut, callTimeOut } = this.formData;
          const params = {
            ...this.formData,
            lineTimeOut: Number(lineTimeOut),
            callTimeOut: Number(callTimeOut),
          };
          if (this.id) {
            params.id = this.id;
          }
          const { code, msg } = await (this.id
            ? updateProject(params)
            : addProject(params));
          if (code === 200) {
            Message.success(msg);
            this.handleClose();
          } else {
            Message.error(msg);
          }
        }
      });
    },

    getFormData(data) {
      for (const key in this.formData) {
        if (this.formData.hasOwnProperty(key) && data.hasOwnProperty(key)) {
          this.formData[key] = data[key] == 0 || data[key] ? data[key] : "";
        }
      }
    },

    handleClose() {
      this.addDialogShow = false;
      this.formData = {
        projectName: "", //项目名称
        businessType: "", //业务类型
        outboundType: "", //外呼类型
        param: "", //参数
        outboundLine: "", //外呼线路
        seats: "", //坐席
        lineTimeOut: 0, //排队超时
        callTimeOut: 0, //呼叫超时
      };
      this.$emit("onCloseAddProjectDialog");
    },
  },
};
</script>

<style lang="scss" scoped>
.edit-main {
  ::v-deep .el-textarea__inner {
    height: 150px;
  }
}
</style>
